import React, { useEffect, useRef, useState } from 'react';
import { Form, Input, Modal, Select, DatePicker, Row, Col, Tabs } from 'antd';
import { adminCompanyType } from '@/utils/constant';
import { useRequest, useUpdateEffect } from '@umijs/hooks';
import {
  apiCustomerGetList,
  apiOrderGetList,
  apiProductLineGetList,
} from '@/services/otherServices';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
    orderNo,
  } = props;
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };
  const formItemLayout2 = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 2 },
      md: { span: 2 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
      md: { span: 20 },
    },
  };
  const [data, setData] = useState([]);
  const [searchValue, setSearchValue] = useState('');
  const [company, setCompany] = useState('');

  const [lineData, setLineData] = useState([]);
  const [lineValue, setLineValue] = useState('');

  const [customerValue, setCustomerValue] = useState('');
  const [customerData, setCustomerData] = useState([]);
  const [customerCompany, setCustomerCompany] = useState('');

  const { loading: getListLoading, run } = useRequest(apiOrderGetList, {
    manual: true,
    throttleInterval: 500,
    onSuccess: (res, params) => {
      setData(res.data);
    },
  });

  const { loading: getListOrderLoading, run: runOrder } = useRequest(
    apiOrderGetList,
    {
      manual: true,
      throttleInterval: 500,
      onSuccess: (res, params) => {
        if (res.data && res.data[0]) {
          const OData = res.data[0];
          setCustomerCompany(OData.customerCompany);
          form.setFieldsValue({
            orderAmount: OData.amount,
            customerCompany: OData.customerCompany,
            productName: OData.productName,
            color: OData.color,
            attribute: OData.attribute,
            grade: OData.grade,
            spec: OData.spec,
          });
        }
      },
    },
  );

  const { loading: lineDataLoading, run: getLineData } = useRequest(
    apiProductLineGetList,
    {
      manual: true,
      throttleInterval: 500,
      onSuccess: (res, params) => {
        setLineData(res.data);
      },
    },
  );

  useUpdateEffect(() => {
    run({
      company,
      orderNo: searchValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [searchValue]);

  useUpdateEffect(() => {
    getLineData({
      company,
      productLine: lineValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [lineValue]);

  const onValuesChange = (changedValues: any, allValues: any) => {
    if (changedValues.company) {
      setCompany(changedValues.company);
      form.setFieldsValue({
        productLine: undefined,
      });
      run({
        customerCompany: allValues.customerCompany,
        productCompany: changedValues.company,
        pageNo: 1,
        pageSize: 10,
      });
      getLineData({
        company: changedValues.company,
        pageNo: 1,
        pageSize: 10,
      });
    }
    if (changedValues.customerCompany) {
      form.setFieldsValue({
        orderNo: undefined,
      });
      run({
        customerCompany: changedValues.customerCompany,
        productCompany: allValues.company,
        status: 2,
        pageNo: 1,
        pageSize: 10,
      });
    }

    if (changedValues.orderNo) {
      const result: any = data.filter(
        (n: any) => n.orderNo === changedValues.orderNo,
      );
      if (result[0].productName === 'PET') {
        form.setFieldsValue({
          formulation:
            '原料: \n' +
            '边料: \n' +
            '增韧剂:     KG\n' +
            '增白剂:     G\n' +
            '紫兰:         G\n' +
            '色母(色粉): ',
        });
      } else if (result[0].productName === 'PVC') {
        form.setFieldsValue({
          formulation:
            '原料: \n' +
            '边料: \n' +
            '181:    KG\n' +
            '增塑剂:    KG\n' +
            '内滑:    KG\n' +
            'P201:     KG\n' +
            'MBS:    KG\n' +
            '钙粉:    G\n' +
            '增白剂:    G\n' +
            '紫兰:    G\n' +
            '群青:    G\n' +
            '白光:    G\n' +
            '外滑:    G\n' +
            '色母(色粉):  \n',
        });
      } else if (
        result[0].productName === 'PS' ||
        result[0].productName === 'PP' ||
        result[0].productName === 'PE'
      ) {
        form.setFieldsValue({
          formulation:
            '主螺杆\n' +
            '原料: \n' +
            '破碎料: \n' +
            '增韧剂:    KG\n' +
            '增白剂:    G\n' +
            '群    青:    G\n' +
            '紫    兰:    G\n' +
            '色母(色粉): \n' +
            '静电剂(导电料): \n' +
            '\n' +
            '副螺杆\n' +
            '原料: \n' +
            '破碎料: \n' +
            '增韧剂:    KG\n' +
            '增白剂:    G\n' +
            '群    青:    G\n' +
            '紫    兰:    G\n' +
            '色母(色粉): \n' +
            '静电剂(导电料): ',
        });
      } else {
        form.setFieldsValue({
          formulation: undefined,
        });
      }

      form.setFieldsValue({
        productName: result[0].productName,
        spec: result[0].spec,
        color: result[0].color,
        conductivity: result[0].conductivity,
        attribute: result[0].attribute,
        grade: result[0].grade,
        orderAmount: result[0].amount,
      });
    }
  };

  const { loading: customerLoading, run: getCustomerList } = useRequest(
    apiCustomerGetList,
    {
      manual: true,
      throttleInterval: 500,
      onSuccess: (res, params) => {
        setCustomerData(res.data);
      },
    },
  );

  useUpdateEffect(() => {
    getCustomerList({
      customerCompany: customerValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [customerValue]);

  useUpdateEffect(() => {
    if (visible === true) {
      runOrder({
        orderNo,
      });
    }
  }, [orderNo, visible]);

  useEffect(() => {
    getLineData({
      pageNo: 1,
      pageSize: 10,
    });
    getCustomerList({
      pageNo: 1,
      pageSize: 10,
    });
    getForm(form);
  }, []);

  useUpdateEffect(() => {
    if (visible === true && editId !== undefined) {
      if (form.getFieldValue('company') !== undefined) {
        run({
          company: form.getFieldValue('company'),
          customerCompany: form.getFieldValue('customerCompany'),
          status: 2,
          pageNo: 1,
          pageSize: 200,
        });
      }
    }
  }, [visible, editId, customerCompany]);

  return (
    <Modal
      width={1024}
      afterClose={afterClose}
      destroyOnClose={true}
      bodyStyle={{ padding: '0 10px' }}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form
        hideRequiredMark
        style={{ marginTop: 8 }}
        form={form}
        name="basic"
        onValuesChange={onValuesChange}
      >
        <Tabs defaultActiveKey="1" type="card">
          <Tabs.TabPane tab="排产数据" key="1">
            <Row>
              <Col span={12}>
                <FormItem
                  rules={[{ required: true, message: '请选择公司' }]}
                  {...formItemLayout}
                  label={'公司名'}
                  name="company"
                >
                  <Select>
                    {adminCompanyType.map(item => (
                      <Select.Option key={item.value} value={item.value}>
                        {item.label}
                      </Select.Option>
                    ))}
                  </Select>
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  rules={[{ required: true, message: '请输入产线名称' }]}
                  {...formItemLayout}
                  label={'产线名称'}
                  name="productLine"
                >
                  <Select
                    showSearch
                    onSearch={value => {
                      setLineValue(value);
                    }}
                    filterOption={false}
                    placeholder="请选择产线"
                  >
                    {lineData &&
                      lineData.map((item: any) => (
                        <Select.Option key={item.id} value={item.productLine}>
                          {item.productLine}
                        </Select.Option>
                      ))}
                  </Select>
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  rules={[{ required: true, message: '请选择客户' }]}
                  {...formItemLayout}
                  label={'客户'}
                  name="customerCompany"
                >
                  <Select
                    showSearch
                    onSearch={value => {
                      setCustomerValue(value);
                    }}
                    filterOption={false}
                    placeholder="请选择客户单位"
                  >
                    {customerData &&
                      customerData.map((item: any) => (
                        <Select.Option
                          key={item.id}
                          value={item.customerCompany}
                        >
                          {item.customerCompany}
                        </Select.Option>
                      ))}
                  </Select>
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  rules={[{ required: true, message: '请选择订单' }]}
                  {...formItemLayout}
                  label={'订单号'}
                  name="orderNo"
                >
                  <Select
                    showSearch
                    onSearch={value => {
                      setSearchValue(value);
                    }}
                    filterOption={false}
                    placeholder="请选择订单"
                  >
                    {data &&
                      data.map((item: any) => (
                        <Select.Option key={item.id} value={item.orderNo}>
                          {item.orderNo}
                        </Select.Option>
                      ))}
                  </Select>
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label={'订单数量'}
                  name="orderAmount"
                >
                  <Input disabled={true} />
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  rules={[{ required: true, message: '请输入品名' }]}
                  {...formItemLayout}
                  label={'品名'}
                  name="productName"
                >
                  <Input disabled={true} />
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  rules={[{ required: true, message: '请输入颜色' }]}
                  {...formItemLayout}
                  label={'颜色'}
                  name="color"
                >
                  <Input disabled={true} />
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label={'属性'} name="attribute">
                  <Input disabled={true} />
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  rules={[{ required: true, message: '请输入等级' }]}
                  {...formItemLayout}
                  label={'等级'}
                  name="grade"
                >
                  <Input disabled={true} />
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  rules={[{ required: true, message: '请输入规格' }]}
                  {...formItemLayout}
                  label={'规格'}
                  name="spec"
                >
                  <Input disabled={true} />
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  rules={[{ required: true, message: '请输入排产数量' }]}
                  {...formItemLayout}
                  label={'排产数量'}
                  name="amount"
                >
                  <Input />
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label={'排产日期'}
                  name="expectProduceDate"
                  rules={[{ required: true, message: '请选择排产日期' }]}
                >
                  <DatePicker
                    placeholder={'请选择排产日期'}
                    style={{ width: '100%' }}
                  />
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label={'备注'} name="remark">
                  <Input.TextArea rows={6} />
                </FormItem>
              </Col>
            </Row>
          </Tabs.TabPane>
          <Tabs.TabPane tab="配方" key="2">
            <Col span={24}>
              <FormItem {...formItemLayout2} label={'配方'} name="formulation">
                <Input.TextArea rows={18} />
              </FormItem>
            </Col>
          </Tabs.TabPane>
        </Tabs>
      </Form>
    </Modal>
  );
};
export default Detail;
